import './home.scss'
import React, { Component } from 'react';
import * as service from '../../api'
import { Swiper ,InfiniteScroll} from 'antd-mobile'
import { withRouter ,NavLink} from 'react-router-dom'
import {connect} from 'react-redux'


class header extends Component {
    constructor(props) {
        super(props)
        this.state = {
            bannerlist:[],
            catelist: [],
            skilllist: [],
            pourlrlist: [],
            token:window.localStorage.getItem('token'),
            count:0,
            hasMore:true
        }
    }
    async componentDidMount(){
        var res = await service.banner_list();
        // console.log(res);
        this.setState({ bannerlist:res.data.data });
        var res = await service.index_catelist();
        // console.log(res);
        this.setState({catelist:res.data.data})
        var res = await service.pro_seckilllist();
        // console.log(res);
        this.setState({skilllist:res.data.data})   
        var res = await service.pro_recommendlist();
        // console.log(res);
        this.setState({pourlrlist:res.data.data})
    }
    toDetail(proid){
        this.props.history.push({pathname:'/detail',state:{id:proid}})
    }
    tocity(){
        this.props.history.push('/city')
    }
    tosearch(){
        this.props.history.push('/search')
    }
    render() {
        return (
            <div className="home">
                <div className='header'>
                    <div className='left' onClick={()=>{this.tocity()}}>{this.props.city}</div>
                    <div className='center'>
                        <span>hg</span>
                        <input type="text" placeholder='请输入搜索关键字' onClick={()=>{this.tosearch()}}/>
                    </div>
                    {
                        this.state.token==null?(<NavLink to='/login'> <div className='right' >登录</div></NavLink>):(<NavLink to='/index/wode'> <div className='right' >我的</div></NavLink>)
                        
                    }
                   
                </div>

                <div className="banner">
                <Swiper className='myswiper' loop autoplay>    
                {
                    this.state.bannerlist.map((item,index)=>{
                        return (
                             <Swiper.Item key={index}>
                                <img src={item.link} alt="" />
                            </Swiper.Item>
                        )
                    })
                }                  
               </Swiper>
                </div>

                <div className="catelist">
                    {
                        this.state.catelist.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <img src={item.imgurl} alt="" />
                                    <div className="name">{item.title}</div>
                                </div>
                            )
                        })
                    }
                </div>

                <div className="miaosha">
                    <div className="mstop">
                        <span>嗨购秒杀</span>
                        <span>8点场</span>
                        <span>0:0:0</span>
                        <span>爆款轮番秒</span>
                    </div>
                    <div className="msbottom">
                        {
                            this.state.skilllist.map((item, index) => {
                                return (
                                    <div className="msitem" key={index} onClick={()=>{this.toDetail(item.proid)}}>
                                        <img src={item.img1} alt="" />
                                        <div className="msprice">¥{item.originprice}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>

                <div className="pourlr">
                    {
                        this.state.pourlrlist.map((item, index) => {
                            return (
                                <div className="small" key={index} onClick={()=>{this.toDetail(item.proid)}}>
                                    <img src={item.img1} alt="" />
                                    <span className='smallcenter'>{item.proname}</span>
                                    <span className='smallbottom'>¥{item.originprice }</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default connect(
    (state)=>{
        return {
           city:state.city
        }
    },
    (dispatch)=>{
        return{
           
        }
       
    }
)(withRouter(header));